<template>
  <div class="echarts" ref="statisticsChart2" style="width: 710px;height: 450px"></div>
</template>

<script>
import {getCurrentInstance, onMounted} from "vue";

export default {
  name: "statistics_chart2",
  setup(){
    const { proxy } = getCurrentInstance();
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ["0-50", "50-100", "100-150", "150-200", "200-250", "250-300", "300-350", "350-400", "400-450", "450-500"],
          axisTick: {
            alignWithLabel: true
          },
          name: 'Distance between SNV and CpG (bp)', // 横轴名称
          nameLocation: 'middle', // 名称位置，可选值为 'start', 'middle', 'end'
          nameGap: 21, // 名称与轴线的距离
          nameRotate: 0 // 名称旋转角度，0 表示不旋转，平行于 x 轴
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: 'Number of ASM pairs', // 纵轴名称
          nameLocation: 'middle', // 名称位置
          nameGap: 70, // 名称与轴线的距离
          nameRotate: 90 // 名称旋转角度，90 表示垂直于 y 轴，平行于 y 轴正方向
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: [2640121, 682231, 266930, 63641, 14047, 4895, 1787, 482, 76, 9]
        }
      ]
    };
    onMounted(()=>{
      const myeChart = proxy.$echarts.init(proxy.$refs.statisticsChart2)
      myeChart.setOption(option)
    })
  }
}
</script>

<style scoped>

</style>
